<template>
  <div>
    <pre>
      前端分页+动态列+表格列可拖拽案例：
      （使用方式基本和原生 el-table 一样）
      
      基于frontendPagingDynCol-v2（其他版本类同）
      1、引入Sortable依赖
        import Sortable from 'sortablejs';
      2、mounted生命周期增加如下逻辑：
        const tbody = this.$refs.dataTable.$el.querySelector(".el-table__body-wrapper tbody");
        Sortable.create(tbody);
    </pre>
    <PageTable
      :data="tableData"
      :pageSizes="[5,10]"
      :pageSize="5"
      :paging="true"
      
      :dynamicColumnSetting="true"
      :columnVisibles="columnVisibles"
      :hidenColumnIndexs="[3]"
      :alwaysShowColumnIndexs="[1,5]"
      :showAlwaysShowColumnInCheckbox="true"

      ref="dataTable"
    >
      <el-table-column type="selection" width="55" v-if="columnVisibles[0]"></el-table-column>
      <el-table-column label="账号" prop="name" v-if="columnVisibles[1]"></el-table-column>
      <el-table-column label="名称" prop="nickname" v-if="columnVisibles[2]"></el-table-column>
      <el-table-column label="邮箱" prop="email" v-if="columnVisibles[3]"></el-table-column>
      <el-table-column label="状态" v-if="columnVisibles[4]">
        <template slot-scope="scope">{{ scope.row.state%2===0?'正常':'锁定' }}</template>
      </el-table-column>
      <el-table-column label="操作" min-width="100" v-if="columnVisibles[5]">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click.stop="clickFunc(scope.row)">操作按钮</el-button>
        </template>
      </el-table-column>
    </PageTable>
  </div>
</template>

<script>
// 引入表格组件
import PageTable from "../frontendPagingDynCol-v2/PageTable.vue";

// 引入可拖拽组件
import Sortable from 'sortablejs';

export default {
  components: {
    PageTable // 引用表格组件
  },
  data() {
    return {
      tableData: [],
      columnVisibles: new Array(6).fill(true)
    };
  },
  methods: {
    queryData() {
      // 模拟后台数据
      let data = [];
      for (var i = 1; i <= 23; i++) {
        data.push({ name: i, nickname: i, email: i, state: i });
      }

      this.tableData = data;
    },
    clickFunc(row) {
      // console.log(row);
      alert(JSON.stringify(row));
    }
  },
  mounted() {
    // 发起查询请求
    this.queryData();

    const tbody = this.$refs.dataTable.$el.querySelector(".el-table__body-wrapper tbody");
    Sortable.create(tbody, {
      // 列表内元素顺序更新的时候触发
      onUpdate: function (/**Event*/evt) {
          // same properties as onEnd
          console.log(evt);
      }
    });
  }
};
</script>

<style lang="scss">
</style>